<template lang="html">
  <div class="article">
    <div class="btn-group">
      <form>
          <el-cascader
            expand-trigger="hover"
            :options="options"
            v-model="form.tag"
            @change="handleChange">
          </el-cascader>
        <el-button type="primary" icon="edit" @click="toDetail">添加</el-button>
      </form>
    </div>

    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        prop="title"
        label="标题">
      </el-table-column>
      <el-table-column
        prop="author"
        label="作者"
        width="120">
      </el-table-column>
      <el-table-column
        prop="tag"
        label="标签"
        width="120"
        :formatter="formatTag">
      </el-table-column>
      <el-table-column
        prop="readingAmount"
        label="浏览量"
        width="80">
      </el-table-column>
      <el-table-column
        prop="createdAt"
        label="创建时间"
        width="170"
        :formatter="formatterCreate">
      </el-table-column>
      <el-table-column
        prop="updatedAt"
        label="更新时间"
        width="170"
        :formatter="formatterUpdate">
      </el-table-column>
      <el-table-column width="150" label="操作">
        <template scope="scope">
        <!-- <el-button
          size="small"
          type="primary"
          @click="handleDetail(scope.$index, scope.row)">查看</el-button> -->
        <el-button
          size="small"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
      </el-table-column>
    </el-table>
    <div class="block my-page">
      <el-pagination
        @current-change="handleCurrentChange"
        :page-size="10"
        layout="prev, pager, next, jumper"
        :total="totalNum">
      </el-pagination>
      </div>
  </div>
</template>

<script>
import {getList, delList, getGroupData} from 'api/article.js'

import {loadToken} from 'common/js/cache.js'

import {timeFormat} from 'common/js/time.js'

import {tagOption} from 'common/js/tagOption.js'

import {formatTag} from 'common/js/formatTag.js'

export default {
  name: 'article',
  data() {
    return {
      dialogFormVisible: false,
      limit: 1000,
      currentPage: 0,
      total: 0,
      offset: 0,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      input: '',
      options: tagOption(),
      value: '',
      formLabelWidth: '120px',
      tableData: [],
      totalNum: 0,
      allData: []
    }
  },
  methods: {
    search() {
      let tag = this.form.tag[1] ? this.form.tag[1] : this.form.tag[0]
      if (tag === 'all') {
        this._getList(this.limit, this.offset, loadToken())
      } else {
        this._getGroupData(tag)
      }
    },
    toDetail() {
      this.$router.push('/backend/index/post-article')
    },
    handleDetail(index, row) {
      this.$router.push('/backend/index/article-detail/' + row.id)
    },
    handleEdit(index, row) {
      this.$router.push('/backend/index/post-article?id=' + row.id)
    },
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delList(row.id, loadToken()).then((res) => {
          if (res.result === 'OK') {
            this.allData = this.delObjInArr(this.allData, row.id)
            let page = this.currentPage
            this.tableData = this.allData.slice(page * 10, (page + 1) * 10)
            this.$message({
              type: 'success',
              message: '文章删除成功'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    formatterUpdate(row) {
      return timeFormat(row.updatedAt)
    },
    formatterCreate(row) {
      return timeFormat(row.createdAt)
    },
    formatTag(row) {
      return formatTag(row.tag)
    },
    handleCurrentChange(val) {
      this.currentPage = val - 1
    },
    _getList(limit, offset, token) {
      getList(limit, offset, token).then((res) => {
        let data = res.data
        this.totalNum = data.length
        this.allData = data
        this.tableData = data.slice(0, 10)
      })
    },
    _getGroupData(tag) {
      getGroupData(tag, loadToken()).then((res) => {
        let data = res.data
        this.allData = data
        this.tableData = data.slice(0, 10)
      })
    },
    handleChange() {
      this.currentPage = 0
      this.search()
    },
    delObjInArr(arr, id) {
      for (var i = 0; i < arr.length; i++) {
        if (arr[i].id === id) {
          arr.splice(i, 1)
          break
        }
      }
      return arr
    }
  },
  created() {
    this._getList(this.limit, this.offset, loadToken())
  },
  watch: {
    currentPage(newVal) {
      if (newVal < 0)newVal = 0
      this.tableData = this.allData.slice(newVal * 10, (newVal + 1) * 10)
    },
    allData(newVal) {
      this.totalNum = newVal.length
    }
  }
}
</script>

<style lang="scss">
.article {
    padding-left: 20px;
    .btn-group {
        margin-bottom: 20px;
        .el-input {
            width: 200px;
        }
        .el-button {
            margin-left: 5px;
        }
    }
}
.el-dialog {
    width: 880px!important;
}
.el-form-item__content {
    width: 50%;
}

.my-page{
  text-align: center;
  padding: 30px 0;
}
</style>
